<template>
   <div class="app-container">
       <div class="tcl">
           <el-tabs v-model="activeName">
            <!-- 基本信息 -->
               <el-tab-pane label="基本信息" name="first">
                  <el-form :model="form" :rules="rules" ref="form">
                     <div style="padding: 20px 100px" >
                        <el-row>
                           <el-col :span="12" >
                              <el-form-item label="供应商名称" label-width="200px" prop="h_name">
                                 <el-input v-model="form.h_name" ></el-input>
                              </el-form-item>

                              <el-form-item label="单位注册地" label-width="200px" prop="h_incorporation">
                                 <el-input v-model="form.h_incorporation"></el-input>
                              </el-form-item>
                              <el-form-item label="企业性质" label-width="200px" prop="h_quality">
                                 <el-input v-model="form.h_quality"></el-input>
                              </el-form-item>
                              <el-form-item label="法人/负责人" label-width="200px" prop="h_juridical">
                                 <el-input v-model="form.h_juridical"></el-input>
                              </el-form-item>
                              <el-form-item label="单位联系地址" label-width="200px" prop="h_address">
                                 <el-input v-model="form.h_address"></el-input>
                              </el-form-item>
                              <el-form-item label="营业执照扫描件" >
                                 <el-upload ref="field119" action="#" :http-request="(file) => uploadDeviceFile(file, 'hCopiesFileList')" :file-list="hCopiesFileList"
                                    :before-upload="fileBeforeUpload" :on-remove="handleRemoveFile">
                                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                                 </el-upload>
                              </el-form-item>
                           </el-col>
                           <el-col :span="12" >
                              <el-form-item label="统一社会信用代码" label-width="200px" prop="h_credit_code">
                                 <el-input v-model="form.h_credit_code"></el-input>
                              </el-form-item>
                              <el-form-item label="机构类型" label-width="200px" prop="h_institution">
                                 <el-input v-model="form.h_institution"></el-input>
                              </el-form-item>
                              <el-form-item label="成立日期" label-width="200px" prop="h_start_time">
                                 <el-input type="date" v-model="form.h_start_time"></el-input>
                              </el-form-item>
                              <el-form-item label="法人/负责人身份证号" label-width="200px" prop="h_juridical_identity">
                                 <el-input v-model="form.h_juridical_identity"></el-input>
                              </el-form-item>
                              <el-form-item label="公司简历" label-width="200px" prop="h_desc">
                                 <el-input v-model="form.h_desc"></el-input>
                              </el-form-item>
                              <el-form-item label="法人/负责人身份证扫描件" >
                                 <el-upload ref="field109" action="#" :http-request="(file) => uploadDeviceFile(file, 'hJuridicalCopiesFileList')" :file-list="hJuridicalCopiesFileList"
                                    :before-upload="fileBeforeUpload" :on-remove="handleRemoveFile">
                                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                                 </el-upload>
                              </el-form-item>
                           </el-col>
                        </el-row>
                     </div>

                     <!-- 开户行 -->
                     <div style="padding: 0 100px; text-align: center;">
                     <p style="color: red; font-size: 12px;text-align: center;">注: 开票信息专用</p>
                     <el-row>
                        <el-col :span="12">
                           <el-form-item label="开户行" label-width="200px" prop="h_bank">
                              <el-input v-model="form.h_bank"></el-input>
                           </el-form-item>
                           <el-form-item label="开户行地址" label-width="200px" prop="h_bank_address">
                              <el-input v-model="form.h_bank_address"></el-input>
                           </el-form-item>
                           <el-form-item label="注册资本（万元）" label-width="200px" prop="h_capital">
                              <el-input v-model="form.h_capital"></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                           <el-form-item label="银行账号" label-width="200px" prop="h_account">
                              <el-input v-model="form.h_account"></el-input>
                           </el-form-item>
                           <el-form-item label="单位注册电话" label-width="200px" prop="h_sign_phone">
                              <el-input v-model="form.h_sign_phone"></el-input>
                           </el-form-item>
                           <el-form-item label="实缴资本（万元）" label-width="200px" prop="h_actual_capital">
                              <el-input v-model="form.h_actual_capital"></el-input>
                           </el-form-item>
                        </el-col>
                     </el-row>
                     </div>

                     <div style="padding: 20px 100px;">
                        <p style="color: red; font-size: 12px;text-align: center;">注: 业务经办人</p>
                        <el-row>
                           <el-col :span="12" >
                              <el-form-item label="姓名" label-width="200px" prop="yw_name">
                                 <el-input v-model="form.yw_name"></el-input>
                              </el-form-item>
                              <el-form-item label="手机号" label-width="200px" prop="yw_phone">
                                 <el-input v-model="form.yw_phone"></el-input>
                              </el-form-item>
                              <el-form-item label="身份扫码件" label-width="200px">
                                 <el-upload ref="field108" action="#" :http-request="(file) => uploadDeviceFile(file, 'ywScanIdcardFileList')"  :file-list="ywScanIdcardFileList"
                                    :before-upload="fileBeforeUpload" :on-remove="handleRemoveFile">
                                    <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                                 </el-upload>
                              </el-form-item>
                           </el-col>
                           <el-col :span="12" >
                              <el-form-item label="身份证号" label-width="200px" prop="yw_idcrad">
                                 <el-input v-model="form.yw_idcrad"></el-input>
                              </el-form-item>
                              <el-form-item label="邮箱" label-width="200px" prop="yw_mailbox">
                                 <el-input v-model="form.yw_mailbox"></el-input>
                              </el-form-item>
                           </el-col>
                        </el-row>
                     </div>
                     <div style="text-align: center; margin-top: 20px;">
                        <el-button type="primary" @click="submitForm">保存页面信息</el-button>
                     </div>
                  </el-form>
               </el-tab-pane>

               <el-dialog
                  title="选择供应商"
                  width="50%"
                  :visible.sync="innerVisible"
                  append-to-body @close="innerVisible = false">
                  <el-table
                     ref="singleTable"
                     :data="supplierData"
                     highlight-current-row
                     @current-change="handleCurrentChange"
                     style="width: 100%">
                     <el-table-column
                        label="供应商id"
                        property="hid"
                        width="60">
                     </el-table-column>
                     <el-table-column
                        property="h_name"
                        label="供应商名称"
                        width="185">
                     </el-table-column>
                     <el-table-column
                        property="h_incorporation"
                        label="单位注册地"
                        width="185">
                     </el-table-column>
                     <el-table-column
                        property="h_quality"
                        label="企业性质">
                     </el-table-column>
                  </el-table>
                  <pagination
                     v-show="total>0"
                     :total="total"
                     :page.sync="supplier.pageNum"
                     :limit.sync="supplier.pageSize"
                     @pagination="innerShow"
                  />
               </el-dialog>

               <!-- 核心技术人员 -->
               <el-tab-pane label="核心技术人员" name="">
                  <el-form label-position="80px" ref="form" :model="form" :rules="rules">
                     <el-form-item label="供应商基本信息" prop="hid">
                        <el-input v-model="this.form.hid" @focus="innerShow"/>
                     </el-form-item>
                     <el-form-item label="姓名" prop="js_name">
                        <el-input v-model="form.js_name"/>
                     </el-form-item>
                     <el-form-item label="职位" prop="js_position">
                        <el-input v-model="form.js_position"/>
                     </el-form-item>
                     <el-form-item label="学历" prop="js_education">
                        <el-input v-model="form.js_education"/>
                     </el-form-item>
                     <el-form-item label="职称" prop="js_title">
                        <el-input v-model="form.js_title"/>
                     </el-form-item>
               </el-form>
               <div style="text-align: center; margin-top: 20px;">
                  <el-button type="primary" @click="subunitPersonnel">保存页面信息</el-button>
               </div>
               </el-tab-pane>
               <!-- 企业资质 -->
               <el-tab-pane label="企业资质" name="fourth">
                  <el-form label-position="80px" ref="form" :model="form" :rules="rules">
                     <el-form-item label="供应商基本信息" prop="hid">
                        <el-input v-model="form.hid" @focus="innerShow"/>
                     </el-form-item>
                     <el-form-item label="证书名称" prop="zz_cert_name">
                        <el-input v-model="form.zz_cert_name"/>
                     </el-form-item>
                     <el-form-item label="证书编号" prop="zz_cert_no">
                        <el-input v-model="form.zz_cert_no"/>
                     </el-form-item>
                     <el-form-item label="发证单位" prop="zz_unit">
                        <el-input v-model="form.zz_unit"/>
                     </el-form-item>
                     <el-form-item label="发证日期" prop="zz_date">
                        <el-input v-model="form.zz_date" type="date"/>
                     </el-form-item>
                     <el-form-item label="有效期至" prop="zz_expiration_date">
                        <el-input v-model="form.zz_expiration_date" type="date"/>
                     </el-form-item>
               </el-form>
               <div style="text-align: center; margin-top: 20px;">
                  <el-button type="primary" @click="subunitEnterprise">保存页面信息</el-button>
               </div>
               </el-tab-pane>

               <!-- 业绩 -->
               <el-tab-pane label="业绩" name="fifth">
                  <el-form label-position="80px" ref="form" :model="form" :rules="rules">
                     <el-form-item label="供应商id" prop="hid">
                        <el-input v-model="form.hid" @focus="innerShow"/>
                     </el-form-item>
                     <el-form-item label="采购单位" prop="yj_unit">
                        <el-input v-model="form.yj_unit"/>
                     </el-form-item>
                     <el-form-item label="合作方" prop="yj_partner">
                        <el-input v-model="form.yj_partner"/>
                     </el-form-item>
                     <el-form-item label="签订日期" prop="yj_date">
                        <el-input v-model="form.yj_date" type="date"/>
                     </el-form-item>
                     <el-form-item label="合同金额（万元）" prop="yj_rmb">
                        <el-input v-model="form.yj_rmb"/>
                     </el-form-item>
                     <el-form-item label="买方业务代表" prop="yj_bbr">
                        <el-input v-model="form.yj_bbr" />
                     </el-form-item>
                     <el-form-item label="买方业务代表联系电话" prop="yj_phone">
                        <el-input v-model="form.yj_phone" />
                     </el-form-item>
               </el-form>
               <div style="text-align: center; margin-top: 20px;">
                  <el-button type="primary" @click="subunitAchievement">保存页面信息</el-button>
               </div>
           </el-tab-pane>
           <!-- 财务状态 -->
           <el-tab-pane label="财务状态" name="sixth">
            <el-form label-position="80px" ref="form" :model="form" :rules="rules">
                     <el-form-item label="供应商id" prop="hid">
                        <el-input v-model="this.form.hid" @focus="innerShow"/>
                     </el-form-item>
                     <el-form-item label="年度" prop="c_annual">
                        <el-input v-model="form.c_annual"/>
                     </el-form-item>
                     <el-form-item label="净利润（万元）" prop="c_net_profit">
                        <el-input v-model="form.c_net_profit"/>
                     </el-form-item>
                     <el-form-item label="资产负债率（%）" prop="c_lev">
                        <el-input v-model="form.c_lev"/>
                     </el-form-item>
               </el-form>
               <div style="text-align: center; margin-top: 20px;">
                  <el-button type="primary" @click="subunitStatus">保存页面信息</el-button>
               </div>
           </el-tab-pane>
           <!-- 相关附件 -->
           <el-tab-pane label="相关附件" name="seventh">
            <el-form label-position="80px" ref="form" :model="form" :rules="rules">
                     <el-form-item label="供应商id" prop="hid">
                        <el-input v-model="this.form.hid" @focus="innerShow"/>
                     </el-form-item>
                     <el-form-item label="名称" prop="fj_name">
                        <el-input v-model="form.fj_name"/>
                     </el-form-item>
                     <el-form-item label="附件" label-width="200px">
                        <el-upload ref="field107" action="#" :http-request="(file) => uploadDeviceFile(file, 'fjAnnexFileList')"  :file-list="fjAnnexFileList"
                           :before-upload="fileBeforeUpload" :on-remove="handleRemoveFile">
                           <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                        </el-upload>
                     </el-form-item>
               </el-form>
               <div style="text-align: center; margin-top: 20px;">
                  <el-button type="primary" @click="subunitAccessories">保存页面信息</el-button>
               </div>
           </el-tab-pane>
           </el-tabs>
       </div>
   </div>
</template>

<script>
import {addSupplier,wholeList,getSupplier} from "@/api/system/supplier";
import {addPersonnel} from "@/api/system/personnel";
import {addEnterprise} from "@/api/system/enterprise";
import {addAchievement} from "@/api/system/achievement";
import {addStatus} from "@/api/system/financialStatus";
import {addAccessories} from "@/api/system/accessories";

import {uplodaBudgetFile} from '@/api/system/purchase'

export default{
   name:"WhTj",
   data(){
      return{
         activeName: 'first',
         supplier:{
            pageNum: 1,
            pageSize: 10
         },
         //合同总数
         total: 0,
         innerVisible: false,
         form: {},
         rules: {},
         //弹出层标题
         title: "",
          // 是否显示弹出层
         open: false,
         //表单参数
         hCopiesFileList: [],
         hJuridicalCopiesFileList: [],
         ywScanIdcardFileList:[],
         fjAnnexFileList:[],
         supplierData:[],
         supplierName: null,

         h_name:null,//供应商名称
         h_credit_code:null,//统一社会信用代码
         h_incorporation:null,//单位注册地
         h_institution:null,//机构类型
         h_quality:null,//企业性质
         h_start_time:null,//成立日期
         h_juridical:null,//法人/负责人
         h_juridical_identity:null,//法人/负责人身份证号
         h_address:null,//单位联系地址
         h_desc:null,//公司简历
         h_bank:null,//开户行
         h_account:null,//银行账号
         h_bank_address:null,//开户行地址
         h_sign_phone:null,//单位注册电话
         h_capital:null,//注册资本
         h_actual_capital:null,//实缴资本
         yw_name:null,//姓名
         yw_idcrad:null,//身份证
         yw_phone:null,//电话
         yw_mailbox:null,//邮箱


         rules: {
            // 其他规则...
            h_name: [
               { required: true, message: '供应商名称不能为空', trigger: 'blur' }
            ],
            h_credit_code: [
               { required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }
            ],
            h_incorporation: [
               { required: true, message: '单位注册地不能为空', trigger: 'blur' }
            ],
            h_institution: [
               { required: true, message: '机构类型不能为空', trigger: 'blur' }
            ],
            h_quality: [
               { required: true, message: '企业性质不能为空', trigger: 'blur' }
            ],
            h_start_time: [
               { required: true, message: '成立日期不能为空', trigger: 'blur' }
            ],
            h_juridical: [
               { required: true, message: '法人/负责人不能为空', trigger: 'blur' }
            ],
            h_address: [
               { required: true, message: '单位联系地址不能为空', trigger: 'blur' }
            ],
            h_desc: [
               { required: true, message: '公司简历不能为空', trigger: 'blur' }
            ],
            h_juridical_identity: [
               { required: true, message: '法人/负责人身份证号不能为空', trigger: 'blur' },
               { pattern: /^(?:\d{15}|\d{18}|\d{17}[\dX])$/, message: '身份证号格式不正确', trigger: 'blur' }
            ],
            yw_name: [
               { required: true, message: '姓名不能为空', trigger: 'blur' }
            ],
            yw_mailbox: [
               { required: true, message: '邮箱不能为空', trigger: 'blur' },
               {
                  pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                  message: '邮箱格式不正确',
                  trigger: 'blur'
               }
            ],
            yw_idcrad: [
               { required: true, message: '身份证号不能为空', trigger: 'blur' },
               { pattern: /^(?:\d{15}|\d{18}|\d{17}[\dX])$/, message: '身份证号格式不正确', trigger: 'blur' }
            ],
            yw_phone: [
               { required: true, message: '电话号码不能为空', trigger: 'blur' },
               { pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
            ],

            h_bank:[
               { required: true, message: '开户行不能为空', trigger: 'blur' }
            ],
            h_account:[
               { required: true, message: '银行账号不能为空', trigger: 'blur' }
            ],
            h_bank_address:[
               { required: true, message: '开户行地址不能为空', trigger: 'blur' }
            ],
            h_capital:[
               { required: true, message: '注册资本不能为空', trigger: 'blur' }
            ],
            h_actual_capital:[
               { required: true, message: '实缴资本不能为空', trigger: 'blur' }
            ],
            h_sign_phone: [
               { required: true, message: '单位注册电话不能为空', trigger: 'blur' },
               { pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
            ],
            // hid:[
            //    { required: true, message: '供应商id不能为空', trigger: 'blur' }
            // ],
         }

      }
   },

   methods:{

      //||this.form.yw_scan_idcard==null||this.form.yw_scan_idcard==''||this.form.h_copies==null||this.form.h_copies==''||this.form.h_juridical_copies==null||this.form.h_juridical_copies==''
      submitForm(){
         this.$refs["form"].validate(valid=>{
            if(valid){
               addSupplier(this.form).then(response=>{
                  console.log(this.form,"HHJH");
                  this.$modal.msgSuccess("修改成功");
                  this.hCopiesFileList = [];
               })
            }
         })
      },
      handleCurrentChange(val){
         console.log(val)
         this.supplierName=val.h_name
         this.form.hid=val.hid
         this.innerVisible=false
      },
      innerShow() {
         console.log('Current page:', this.supplier.pageNum);
         console.log('Page size:', this.supplier.pageSize);
         wholeList(this.supplier).then(res => {
            console.log(res, "D555555558848");
            this.supplierData = res.rows;
            this.total = res.total;
            this.innerVisible = true;
         });
      },
      subunitPersonnel(){
         this.$refs["form"].validate(valid=>{
            if(valid){
               if(this.form.hid==null||this.form.hid==''||
                  this.form.js_name==null||this.form.js_name==''||
                  this.form.js_position==null||this.form.js_position==''||
                  this.form.js_education==null||this.form.js_education==''||
                  this.form.js_title==null||this.form.js_title==''
               ){
                  this.$message.error("信息不能为空")

               }else{
               addPersonnel(this.form).then(response=>{
                  this.$modal.msgSuccess("新增成功");
               })
            }
            }
         })
      },
      subunitEnterprise(){
         this.$refs["form"].validate(valid=>{
            if(valid){
               if(this.form.hid==null||this.form.hid==''||
                  this.form.zz_cert_name==null||this.form.zz_cert_name==''||
                  this.form.zz_cert_no==null||this.form.zz_cert_no==''||
                  this.form.zz_unit==null||this.form.zz_unit==''||
                  this.form.zz_date==null||this.form.zz_date==''||
                  this.form.zz_expiration_date==null||this.form.zz_expiration_date==''
               ){
                  this.$message.error("信息不能为空")

               }else{
               addEnterprise(this.form).then(response=>{
                  this.$modal.msgSuccess("新增成功");
               })
            }
            }
         })
      },subunitAchievement(){
         this.$refs["form"].validate(valid=>{
            if(valid){
               if(this.form.hid==null||this.form.hid==''||
                  this.form.yj_unit==null||this.form.yj_unit==''||
                  this.form.yj_partner==null||this.form.yj_partner==''||
                  this.form.yj_date==null||this.form.yj_date==''||
                  this.form.yj_rmb==null||this.form.yj_rmb==''||
                  this.form.yj_bbr==null||this.form.yj_bbr==''||
                  this.form.yj_phone==null||this.form.yj_phone==''
               ){
                  this.$message.error("信息不能为空")

               }else{
               addAchievement(this.form).then(response=>{
                  this.$modal.msgSuccess("新增成功");
               })
            }
            }
         })
      },
      subunitStatus(){
         this.$refs["form"].validate(valid=>{
            if(valid){
               if(this.form.hid==null||this.form.hid==''||
                  this.form.c_annual==null||this.form.c_annual==''||
                  this.form.c_net_profit==null||this.form.c_net_profit==''||
                  this.form.c_lev==null||this.form.c_lev==''
               ){
                  this.$message.error("信息不能为空")

               }else{
                  addStatus(this.form).then(response=>{
                     this.$modal.msgSuccess("新增成功");
               })
            }
            }
         })
      },
      subunitAccessories(){
         this.$refs["form"].validate(valid=>{
            if(valid){
               if(this.form.hid==null||this.form.hid==''||
                  this.form.fj_name==null||this.form.fj_name==''||
                  this.form.fj_annex==null||this.form.fj_annex==''
               ){
                  this.$message.error("信息不能为空")

               }else{
                  addAccessories(this.form).then(response=>{
                     this.$modal.msgSuccess("新增成功");
               })
            }
            }
         })
      },
      fileBeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 10
            if (!isRightSize) {
                this.$message.error('文件大小超过 10MB')
            }
            return isRightSize
      },
      uploadDeviceFile(file,fileListName) {
            // 创建formdata实例
            let form = new window.FormData();
            // 将获取的文件通过append方法加入实例中
            form.append("file", file.file);
            //发送axios请求
            uplodaBudgetFile(form)
                .then(res => {
                     // 拿到后端响应的文件名称反显到列表的form
                     const fileInfo = {
                        name: res.data.name,
                        url: res.data.url,
                        size: res.data.size,
                        uid: file.file.uid,
                     };
                     if (fileListName === 'hCopiesFileList') {
                        this.form.h_copies = res.data.url;
                     } else if (fileListName === 'hJuridicalCopiesFileList') {
                        this.form.h_juridical_copies = res.data.url;
                     } else if (fileListName === 'ywScanIdcardFileList') {
                        this.form.yw_scan_idcard = res.data.url;
                     } else if (fileListName === 'fjAnnexFileList') {
                        this.form.fj_annex = res.data.url;
                     }
                     this[fileListName].push(fileInfo); // 直接添加文件名字符串
                })
                .catch(err => {
                    console.error('上传文件失败:', err);
                });
        },
         //删除文件
      handleRemoveFile(file) {
         removeFile(file.name).then(res => {
            if (res.data == 1) {
                  this.$message({
                     message: '删除成功',
                     type: 'success'
                  });
                  // 从文件列表中移除文件
                  this.hCopiesFileList = this.hCopiesFileList.filter(f => f.name !== file.name);
                  this.hJuridicalCopiesFileList = this.hJuridicalCopiesFileList.filter(f => f.name !== file.name);
                  this.ywScanIdcardFileList = this.ywScanIdcardFileList.filter(f => f.name !== file.name);
                  console.log(this.hCopiesFileList, "文件列表更新");
            }
         }).catch(error => {
            console.error('删除文件失败:', error);
         });
      },

   }
}
</script>


